<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
<%@include file="/WEB-INF/pages/header.jsp" %>
<script type="text/javascript" src="<%=ctxPath %>/lib/validation/jquery.validate.min.js"></script>
<title>添加图书信息</title>
</head>
<body>
<div class="pd-20">

    <script type="text/javascript">
        $(function(){
            $("form").validate({
                'rules':{
                },
                messages:{
                },
                submitHandler:function(form){
                    //如果提交form表单的内容，则由下面的方法处理
                    var bool = window.confirm("确定要进行此操作吗？");
                    if(bool)
                    {
                        $.post(form.action, $(form).serialize(), function(ajaxResult) {
                            alert(ajaxResult.msg);
                            if(ajaxResult.code == 200){
                                parent.location.reload();
                            }else {
                                location.reload();
                            }
                        }, 'json');
                        event.preventDefault();
                    }
                }
            });
        });

    </script>

    <form action="<%=ctxPath %>/opus/add" method="post"  class="form form-horizontal">
    
        <div class="row cl">
            <label class="form-label col-2">书名</label>
            <div class="formControls col-5">
                <input type="text" class="input-text"  name="name" />
            </div>
            <div class="col-5"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-2">图书简介</label>
            <div class="formControls col-5">
                <input type="text" class="input-text"  name="intro" />
            </div>
            <div class="col-5"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-2">分类</label>
            <div class="formControls col-5">
                <select name="typeId">
                   <c:forEach items="${typesList}" var="types" >
                       <option value="${types.id}">${types.name}</option>


                   </c:forEach>
                </select>
            </div>
            <div class="col-5"></div>
        </div>

        <script>

            function subFile(){
                //创建存储文件数据的容器
                var formData = new FormData();
                //获取input框的files属性, 文件的内容都在里面存着,
                var file = $("#file")[0].files[0];
                //第一个参数是字段名
                formData.append("file", file);

                $.ajax({
                    url: "${pageContext.request.contextPath}/img/upload",
                    type: "post",
                    data:formData,
                    contentType:false,
                    processData:false,
                    dataType:'json',
                    cache:false,
                    success: function (ajaxResult) {
                        $("#inco").attr("src","${pageContext.request.contextPath}/img/getImage?image=" + ajaxResult.data)
                        $("#icon").attr("value",ajaxResult.data)
                        // $("#inco").attr("src", "/day07/down?fileName=" + ajaxResult);
                    }
                })
            }





        </script>




        <div class="row cl">
            <label class="form-label col-2">上传图片</label>
            <div class="formControls col-5">
                <input type="hidden" name="icon" id="icon">
                <img width="300px" height="200px" src="${pageContext.request.contextPath}/img/getImage?image=default.jpeg" id="inco">
                <input type="file"  name="file" id="file" onchange="subFile()" />

            </div>
            <div class="col-5"></div>
        </div>




        <div class="row cl">
            <div class="col-9 col-offset-2">
                <input id="addSubmit" class="btn btn-primary radius" type="submit" value="添加"  />
                <input class="btn btn-default radius" type="button" value="关闭" onclick="parent.location.reload()" style="margin-left: 30px;" />
            </div>
        </div>
    </form>
</div>
</body>
</html>